<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>

        <!-- 
        table ul ol select 里面只能放特定标签，不能直接放组件，要使用 is="vue:mytr" 来使用
        否则内容会被提取到父标签外面去
          -->
        <table>
            <!-- 该写法是错误的，不能在 table ul ol select 中放其他组件，必须是 <li>，<tr> 和 <option> -->
            <!-- <mytr></mytr> -->
            <!-- vue:mytr 冒号后面不能有空格 -->
            <tr is="vue:mytr"></tr>
        </table>
    </div>
</body>

<template id="mytr">
    <tr>
        <td>内容</td>
    </tr>
</template>

<script>
    const app = {
        data() {
            return {}
        },
        methods: {},
        components: {
            mytr: {
                template: '#mytr'
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>